<%@ page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%
    String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	
%>
<!DOCTYPE HTML>

<%@ taglib prefix="c" uri="/WEB-INF/tlds/jstl-core.tld"%>
<%@ taglib prefix="fmt" uri="/WEB-INF/tlds/jstl-fmt.tld"%>
<%@ taglib prefix="fn" uri="/WEB-INF/tlds/jstl-fn.tld" %>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>订单详情11</title> 
<link href="<%=basePath%>resources/mtm/css/css.css" rel="stylesheet" id="cssUrl"> 
<link href="<%=basePath%>resources/mtm/css/bootstrap337.min.css?10" rel="stylesheet" id="cssUrl"> 
<link href="<%=basePath%>resources/css/photoswipe.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css" rel="stylesheet">
	<link href="<%=basePath%>resources/css/swiper/swiper.mini.css" rel="stylesheet">
<script src="<%=basePath%>resources/js/vue.js"></script>
<style>
.structure ul li,
.fabric dl dd,
.amountNum ul li span{ font-size: 14px;}
.orderTable .list .box dl{ padding: 0}
.orderTable .list .box{ padding: 20px}


/* 当前页面css */
.productText li{ font-size: 15px; margin-bottom: 12px !important;}
img.changBig{ max-width: 200px; max-height: 200px}
body{ font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo}
table td{ font-size: 14px}
table tbody td{ line-height: 28px !important; vertical-align: middle !important; }
.headTit{ margin: 0; text-align: center; background: #2F4056;font-size: 20px; letter-spacing: 2px; line-height: 50px; color: #fff;
 box-shadow: 0px 1px 10px #ccc; position: fixed; top: 0; left: 0; right: 0; z-index: 10} 
.customizedDetail .con{ padding: 20px 100px 100px; background: none} 
.customizedDetail .con ul.conUl { width: 100%; line-height: 48px; height: 48px; font-size: 16px;}
.customizedDetail .con ul.conUl li{  display: inline-block; padding-right: 20px;}
.customizedDetail .con ul.dressingHabitList{ padding-left: 140px; background-color: #f9f9f9; border-top: 1px solid #ddd; font-size: 14px; line-height: 48px;}
.customizedDetail .con ul.dressingHabitList li {  padding-right: 0px; display: inline-block; width: 48%;
	line-height: 30px; }
.customizedDetail .con ul.dressingHabitList li:nth-child(1){  padding-right: 50px;}



.detailLineBox{ margin-top: 20px}
.detailLineBox h2.tit{ padding: 0 24px; font-size: 16px; background: #ddd;  color: #2F4056; line-height: 44px; position: relative; z-index: 2;}
.detailLineBox h2.tit:before{ content: '';  width: 0; height: 0; position: absolute; left: 0; top: 0;
	border-left: 6px solid #2F4056; border-right: 6px solid #ddd; border-top: 6px solid #2F4056; border-bottom: 6px solid #ddd; }
.detailLineBox h2.tit:after{ content: ''; background: #2F4056; width: 0; height: 0;  position: absolute; right: 0; bottom: 0;
	border-left: 7px solid #ddd; border-right: 7px solid #2F4056; border-top: 7px solid #ddd; border-bottom: 7px solid #2F4056; }
.detailLineBox h2.tit span{ opacity: 0.5; font-size: 12px;}
.pswp__img{ background: #fff; }
.detailLineBox div.tit{ padding-left: 70px; line-height: 38px; font-size: 14px;}
 
.detailLineBox.picture3DInfo { }
.detailLineBox.picture3DInfo h3{margin-bottom: 0;}
.detailLineBox.picture3DInfo .body { display: flex; padding: 15px 0; height: auto;}
.detailLineBox.picture3DInfo .body.showImg {  height: auto; width: 1000px;}
.detailLineBox.picture3DInfo .body ul{overflow: hidden; display: inline-block;}
.detailLineBox.picture3DInfo .body ul li{float: left;text-align: center; height: 100% ;margin-right: 0px;background: url("<%=basePath%>resources/images/3d_bg.jpg") 100% 100%/100% 100%;}
.detailLineBox.picture3DInfo .body ul li img{width: 170px;height: auto;object-fit: scale-down;}
.detailLineBox.picture3DInfo .body p.info{ color: #e63770; font-size: 14px; padding-left: 55px; margin-top: 10px;}
.detailLineBox.picture3DInfo .body a.show3dBtn { width: 110px;  }
.detailLineBox.picture3DInfo .body a.show3dBtn div { width: 100%; height: 110px; background-color: #e63770; text-align: center; }
.detailLineBox.picture3DInfo .body a.show3dBtn div img{ margin-top: 10px; width: 50px; height: 50px; content: url('<%=basePath%>resources/images/btn_3d_new.png');}
.detailLineBox.picture3DInfo .body a.show3dBtn div p{ text-align: center; font-size: 17px; width: 100%; color: #fff;}


.swiper-container {
	width: 100%;
	height: 100%;

}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: url("<%=basePath%>resources/images/externalcall/beijing.jpg") 100% 100%/100% 100%;
	padding: 10px;

	object-fit: scale-down;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.productImg .imgBox	{padding: 0}

.pswp img {
	max-width: 90%;
	margin: 0 auto;
	max-height: 100%;
	object-fit: contain;
	background: url("<%=basePath%>resources/images/externalcall/beijing.jpg") 100% 100%/100% 100%;
}

</style>
</head>

<body>  
<div class="detailMain"> 
 	<h1 class="headTit">定制工艺单</h1>
	<div class="customizedDetail">
		<div class="con">
			<div class="detailLineBox">
				<h2 class="tit">订单信息&nbsp;&nbsp;</h2>
				<div class="row">
					<div class="col-sm-5">
						<div class="productImg">
							<div class="imgBox">
								<img src="${saleOrderDetailVO.picture}" />
								<!-- <c:choose>
									<c:when test="${saleOrderDetailVO.picture3DList == null || fn:length(saleOrderDetailVO.picture3DList) == 0}"> -->
									
									<!-- </c:when>
									<c:otherwise>
										<div class="swiper-container">
											<div class="swiper-wrapper">
												<c:forEach var="picture3D_" items="${saleOrderDetailVO.picture3DList}" varStatus="varStatus_picture3D">
													<img class="swiper-slide" onclick="pictureListClick(${varStatus_picture3D.index})" src="${picture3D_}" />
												</c:forEach>
											</div> 
											<div class="swiper-pagination"></div> 
											<div class="swiper-button-next"></div>
											<div class="swiper-button-prev"></div>
										</div>
									</c:otherwise>
								</c:choose> -->
							</div>
						</div>
					</div>
					<div class="col-sm-7">
						<div class="productText">
							<ul>
								<li>订单号/行号：${saleOrderDetailVO.orderNo}-${saleOrderDetailVO.orderLineId}</li>
								<li>款号：${saleOrderDetailVO.styleCode}<span style="color: blue;">${saleOrderDetailVO.serialNumber}</span></li>
								<li>款名：${saleOrderDetailVO.saleDescription}</li>
								<li>订单交期：<fmt:formatDate value="${saleOrderDetailVO.deliveryDate}" pattern="yyyy-MM-dd" /></li>
								<li>门店：${saleOrderDetailVO.salesOutletsName}</li>
								<li>导购：${saleOrderDetailVO.employeeName}</li>
								<li>顾客：${saleOrderDetailVO.customerName}</li>
								<li>订单日期：<fmt:formatDate value="${saleOrderDetailVO.createDate}" pattern="yyyy-MM-dd" /></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="detailLineBox picture3DInfo">
				<h2 class="tit">服装3D效果&nbsp;&nbsp;</h2> 
				<!-- <div class="body">
					<ul>
						<li >
						  <img src="subItem "  onclick="showImgClick()">
						</li>
					  </ul>  
					  <a class="show3dBtn"  >
						<div>
						  <img class="">  
						  <p>观看3D效果</p>
						</div> 
					  </a>
					  <p class="info">抱歉，该服装暂无3D效果。</p>
				</div>	 -->
				
				  <div :class="['body',(show3dObj.picture3D != null && show3dObj.picture3D != '')?'showImg':'']" > 
					<template v-if="checkIsHave3DInfo()">
					   <template v-if="checkIsHave3DPicInfo()" >
						 <ul>
						   <li v-for="(subItem, index) in show3dObj.picture3DList" :key="index">
							 <img class="preview-img" :src="subItem ? subItem : '../../../../static/img/common/empty/zbl55@2x.png' + '?imageMogr2/thumbnail/x800/strip/quality/50'"
							   @click="pictureListClick(index)"> 
						   </li>
						 </ul>  
					   </template> 
					   <template v-if="checkIsHave3DModelInfo()">
					   <a class="show3dBtn" @click="show3dClick()">
						 <div>
						   <img class="">  
						   <p>观看3D效果</p>
						 </div> 
					   </a>
					 </template>
				   </template>
				   <template v-else>
					   <p class="info">抱歉，该服装暂无3D效果。</p>
				   </template>
				 </div> 
			</div>

			<div class="detailLineBox">
				<h2 class="tit">需要调整的部件结构&nbsp;&nbsp;</h2>
				<table class="table table-striped ">
					<thead>
						<tr>
							<td align="center" width="10%"><b>序号</b></td>
							<td align="center" width="20%"><b>部位</b></td>
							<td align="center" width="35%"><b>原部件</b></td>
							<td align="center" width="35%"><b>调整后</b></td>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="part_" items="${partDetailVOList}">
							<tr>
								<td align="center">${part_.sortNum}</td>
								<td align="center">${part_.positionName}</td>
								<td align="center" width="200" height="200"><img src="${part_.oldPartUrl}" class="changBig" /><br>${part_.oldPartName}</td>
								<td align="center" width="200" height="200"><img src="${part_.newPartUrl}"  class="changBig" /><br>${part_.newPartName}</td>
							</tr>
						</c:forEach>
					</tbody>
						<c:if test="${empty partDetailVOList || fn:length(partDetailVOList) == 0}">
							<tfoot>
								<tr>
									<td align="center" colspan="4">非常抱歉，暂时没有数据展示</td>
								</tr>
							</tfoot>
						</c:if>
				</table>
			</div>
			<div class="detailLineBox">
				<h2 class="tit">面料信息&nbsp;&nbsp;</h2>
				<table class="table table-striped  ">
					<tbody>
						<tr>
							<td align="center" width="200" height="200"><img src="${materialData.picture}"   class="changBig"/></td>
							<td>编码：${materialData.code}<br>类型：${materialData.type}</td>
							<c:forEach var="fafb_" items="${fafbData}">
									<td align="center" width="200"><img src="${fafb_.picUrl}"  class="changBig"/></td>
									<td>编码：${fafb_.materialCode}<br>类型：里布或朴布</td>
									<c:if test="${varStatus_fafb.count+1 % 4 == 0} ">
									</tr>
									<tr>
								 </c:if>
							</c:forEach>
						</tr>
					</tbody>
					<c:if test="${empty materialData && empty fafb_}">
							<tfoot>
								<tr>
									<td align="center" colspan="4">非常抱歉，暂时没有数据展示</td>
								</tr>
							</tfoot>
					</c:if>

				</table>
			</div>
			<div class="detailLineBox">
				<h2 class="tit">图案与线迹装饰&nbsp;&nbsp;</h2>
				<table class="table table-striped ">
					<tbody>
					<!-- 绣花 -->
					<c:forEach var="embroider_" items="${embroiders}" varStatus="varStatus">
						<tr> 
							<td align="center" width="200" height="200"><img src="${embroider_.partUrl}"  class="changBig" /></td>
							<td>类型：${embroider_.type}<br>位置：${embroider_.positionName}<br>工艺：${embroider_.patternTechnology}</td>
							 <c:if test="${varStatus.count % 4 == 0} ">
								</tr>
								<tr>
							 </c:if>
						</tr>
					</c:forEach>
					<!-- 线迹 -->
					<c:forEach var="appearance_" items="${appearances}" varStatus="varStatus1">
						<tr>
							<td align="center" width="200" height="200"><img src="${appearance_.partUrl}" class="changBig"  /></td>
							<td>类型：${appearance_.type}<br>位置：${appearance_.positionName}<br>颜色：${appearance_.colorName}</td>
							 <c:if test="${varStatus1.count % 4 == 0}">
								</tr>
								<tr>
							 </c:if>
						</tr>
					</c:forEach>
					</tbody>
					<c:if test="${empty embroiders && empty appearances}">
						<tfoot>
							<tr>
								<td align="center" colspan="4">非常抱歉，暂时没有数据展示</td>
							</tr>
						</tfoot>
					</c:if>
				</table>
			</div>
			<div class="detailLineBox">
				<h2 class="tit">装饰明线信息&nbsp;&nbsp;</h2>
				<table class="table table-striped ">
					<thead>
						<tr>
							<td align="center" width="20%"><b>线色编码</b></td>
							<td align="center" width="20%"><b>颜色描述</b></td>
							<td align="center" width="20%"><b>明线种类</b></td>
							<td align="center" width="20%"><b>部位</b></td>
							<td align="center" width="20%"><b>部位明线说明</b></td>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="ff_" items="${ffData}" varStatus="varFF">
							<tr>
								<td align="center">${ff_.ffCode}</td>
								<td align="center">${ff_.colorDesc}</td>
								<td align="center">${ff_.partType}</td>
								<td align="center">${ff_.embroideryPosition}</td>
								<td align="center">${ff_.partName}</td>
							</tr>
						</c:forEach>
					</tbody>
					<c:if test="${empty ffData}">
						<tfoot>
							<tr>
								<td align="center" colspan="5">非常抱歉，暂时没有数据展示</td>
							</tr>
						</tfoot>
					</c:if>	
				</table>
			</div>
			<div class="detailLineBox">
				<h2 class="tit">配饰信息&nbsp;&nbsp;</h2>
				<table class="table table-striped ">
					<thead>
					<tr>
						<td align="center" width="20%"><b>配饰图案</b></td>
						<td align="center" width="20%"><b>配饰位置</b></td>
						<td align="center" width="20%"><b>配饰名称</b></td>
						<td align="center" width="20%"><b>配饰规格</b></td>
						<td align="center" width="20%"><b>配饰编码</b></td>
					</tr>
					</thead>
					<tbody>
					<c:forEach var="fastener" items="${fasteners}" varStatus="varfastener">
						<tr>
							<td align="center" width="200" height="200"><img src="${fastener.materialPicture}"  class="changBig" /></td>
							<td align="center">${fastener.positionName}</td>
							<td align="center">${fastener.salingName}</td>
							<td align="center">${fastener.spec}</td>
							<td align="center">${fastener.materialCode}</td>
						</tr>
					</c:forEach>
					</tbody>
					<c:if test="${empty fasteners}">
						<tfoot>
						<tr>
							<td align="center" colspan="5">非常抱歉，暂时没有数据展示</td>
						</tr>
						</tfoot>
					</c:if>
				</table>
			</div>
			<div class="detailLineBox">
				<h2 class="tit">辅料信息&nbsp;&nbsp;</h2>
				<table class="table table-striped ">
					<thead>
					<tr>
						<td align="center" width="25%"><b>图片</b></td>
						<td align="center" width="35%"><b>编码</b></td>
						<td align="center" width="20%"><b>颜色</b></td>
						<td align="center" width="20%"><b>规格</b></td>
					</tr>
					</thead>
					<tbody>
						<c:forEach var="fu_" items="${fuData}" varStatus="varFF">
							<tr>
								<td align="center" width="200" height="200"><img src="${fu_.picUrl}" class="changBig"  /></td>
								<td align="center" width="30%">${fu_.materialCode}</td>
								<td align="center" width="20%">${fu_.colorName}</td>
								<td align="center" width="20%">${fu_.spec}</td>
							</tr>
						</c:forEach>
					</tbody>
					<c:if test="${fuData ==null || fn:length(fuData) == 0}">
						<tfoot>
							<tr>
								<td align="center" colspan="4">非常抱歉，暂时没有数据展示</td>
							</tr>
						</tfoot>
					</c:if>	
				</table>
			</div>
			<div class="detailLineBox">
				<!-- 人体尺寸 -->
				<c:if test="${saleOrderDetailVO.measureStatus == '1'}">
					<h2 class="tit">人体尺寸&nbsp;&nbsp;</h2>
					<table class="table table-striped ">
						<thead>
							<tr>
								<td align="right" width="16%">量体单号&nbsp;&nbsp;</td>
								<td width="17%">&nbsp;&nbsp;${measureObj.serviceCode}</td>
								<td align="right" width="16%">量体方式&nbsp;&nbsp;</td>
								<td width="17%">&nbsp;&nbsp;
									<c:choose>
										<c:when test="${measureObj.measureChannel == 'tozcloud'}">拍照量体</c:when>
										<c:when test="${measureObj.measureChannel == 'orange'}">智能量体</c:when>
										<c:otherwise>手工量体</c:otherwise>
									</c:choose>
								</td>
								<td align="right" width="16%">量体时间&nbsp;&nbsp;</td>
								<td width="17%">&nbsp;&nbsp;${measureObj.createTime}</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<c:forEach var="measureRecordDetailVO" items="${measureRecordDetailVOList}" varStatus="varStatus_measureRecordDetail">
								<td align="right" width="16%">${measureRecordDetailVO.measurePartsName}&nbsp;&nbsp;</td>
								<td align="left" width="17%">&nbsp;&nbsp;${measureRecordDetailVO.length.stripTrailingZeros().toPlainString()}&nbsp;${measureRecordDetailVO.unit}</td>
								<c:if test="${varStatus_measureRecordDetail.count % 3 == 0}">
							</tr>
							<tr>
								</c:if>
								</c:forEach>
							</tr>
						</tbody>
						<c:if test="${measureRecordDetailVOList== null || fn:length(measureRecordDetailVOList) == 0}">
							<tfoot>
							<tr>
								<td align="center" colspan="6">非常抱歉，暂时没有数据展示</td>
							</tr>
							</tfoot>
						</c:if>
					</table>
					<c:if test="${measurePictureUrl != null}">
						<ul class="conUl">
							<c:forEach items="${fn:split(measurePictureUrl,',')}" var="pictureUrl" varStatus="second">
								<li class="measureUrl">
									<c:if test="${pictureUrl!=''}">
										<a href="javascript:void(0);" onclick="openPhotoSwipe('${pictureUrl}');">量体图片${second.index+1}</a>
									</c:if>
								</li>
							</c:forEach>
						</ul>
					</c:if>
				</c:if>
				<!-- 靠码尺寸 -->
				<c:if test="${saleOrderDetailVO.orderType == '20' && saleOrderDetailVO.measureStatus == '2'}">
					<h2 class="tit">靠码尺寸&nbsp;&nbsp;</h2>
					<table class="table table-striped ">
						<tbody>
						<tr>
							<c:forEach var="mbsByCodeRecord" items="${mbsByCodeRecordList}" varStatus="varStatus_mbsByCodeRecord">
								<td align="right" width="16%">${mbsByCodeRecord.customPartName}&nbsp;&nbsp;</td>
								<c:choose>
									<c:when test="${mbsByCodeRecord.inputVal != null && (mbsByCodeRecord.inputVal > 0 || mbsByCodeRecord.inputVal < 0)}">
										<td align="left" width="17%">&nbsp;&nbsp;${mbsByCodeRecord.length}=${mbsByCodeRecord.length - mbsByCodeRecord.inputVal}(默认值) + ${mbsByCodeRecord.inputVal}(调整量)</td>
									</c:when>
									<c:otherwise>
										<td align="left" width="17%">&nbsp;&nbsp;${mbsByCodeRecord.length}</td>
									</c:otherwise>
								</c:choose>
							<c:if test="${varStatus_mbsByCodeRecord.count % 3 == 0}">
						</tr>
						<tr>
							</c:if>
							</c:forEach>
						</tr>
						</tbody>
						<c:if test="${mbsByCodeRecordList== null || fn:length(mbsByCodeRecordList) == 0}">
							<tfoot>
							<tr>
								<td align="center" colspan="6">非常抱歉，暂时没有数据展示</td>
							</tr>
							</tfoot>
						</c:if>
					</table>
				</c:if>
			</div>
			<c:if test="${likeMeasureRecordDetailVOList!=null && fn:length(likeMeasureRecordDetailVOList) > 0}">
				<div class="detailLineBox">
					<h2 class="tit">${saleOrderDetailVO.measureLikeCodeName}&nbsp;&nbsp;</h2>
					<table class="table table-striped ">
						<tbody>
						<tr>
							<c:forEach var="likeMeasureRecordDetailVO" items="${likeMeasureRecordDetailVOList}" varStatus="varStatus_likeMeasureRecordDetail">
							<td align="right" width="16%">${likeMeasureRecordDetailVO.measurePartsName}&nbsp;&nbsp;</td>
							<td align="left" width="17%">&nbsp;&nbsp;${likeMeasureRecordDetailVO.length.stripTrailingZeros().toPlainString()}&nbsp;${likeMeasureRecordDetailVO.unit}</td>
							<c:if test="${varStatus_likeMeasureRecordDetail.count % 3 == 0}">
						</tr>
						<tr>
							</c:if>
							</c:forEach>
						</tr>
						</tbody>
						<c:if test="${likeMeasureRecordDetailVOList== null || fn:length(likeMeasureRecordDetailVOList) == 0}">
							<tfoot>
							<tr>
								<td align="center" colspan="4">非常抱歉，暂时没有数据展示</td>
							</tr>
							</tfoot>
						</c:if>
					</table>
				</div>
			</c:if>
			<div class="detailLineBox">
				<h2 class="tit">顾客喜好&nbsp;&nbsp;</h2>
				<div class="tit">&nbsp;&nbsp;<span>量体取数状态：</span>${saleOrderDetailVO.measureLikeCodeName}</div>
				<div class="tit">&nbsp;&nbsp;<span>内搭种类：</span>${saleOrderDetailVO.styleNDDesc}</div>
				<div class="tit">&nbsp;&nbsp;<span>备注：</span>${saleOrderDetailVO.otherRequest}</div>
				<ul class="dressingHabitList">
					<c:choose>
						<c:when test="${measureLikePositionRecordVOs== null || fn:length(measureLikePositionRecordVOs) == 0}">
							<div class="g-mt-20 g-ta-c g-pt-20 g-pb-20 g-fz-14 g-mb-20">
								无顾客喜好
							</div>
						</c:when>
						<c:otherwise>
							<table class="table table-striped table-hover text-left"  >
								<thead>
								<tr>
									<th class="col-md-1"></th>
									<th class="col-md-3">部位名称</th>
									<th class="col-md-3">原创成衣尺寸</th>
									<th class="col-md-3">调整量</th>
									<th class="col-md-3">定制的成衣尺寸</th>
								</tr>
								</thead>
								<tbody>
								<c:forEach var="measureLikePositionRecordVO" items="${measureLikePositionRecordVOs}">
									<tr>
										<td></td>
										<td>${measureLikePositionRecordVO.measurePartsName}</td>
										<td>${measureLikePositionRecordVO.garmentPartLength}</td>
										<td>${measureLikePositionRecordVO.inputVal}</td>
										<td>${measureLikePositionRecordVO.length}</td>
									</tr>
								</c:forEach>
								</tbody>
							</table>
						</c:otherwise>
					</c:choose>
				</ul>
			</div>
			<div class="detailLineBox">
				<h2 class="tit">CAD成衣尺寸&nbsp;&nbsp;</h2>
				<table class="table table-striped ">
					<thead>
						<tr>
							<td align="center" width="10%"><b>顺序</b></td>
							<td align="center" width="45%"><b>部位</b></td>
							<td align="center" width="45%"><b>长度(CM)</b></td>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="size_" items="${cadSizeList}">
							<tr>
								<td align="center" width="10%">${size_.sort}</td>
								<td align="center" width="45%">${size_.codeDesc}</td>
								<td align="center" width="45%">${size_.value}</td>
							</tr>
						</c:forEach>
					</tbody>
					<c:if test="${cadSizeList ==null || fn:length(cadSizeList) == 0}"> 
						<tfoot>
							<tr>
								<td align="center" colspan="4">非常抱歉，暂时没有数据展示</td>
							</tr>
						</tfoot>
					</c:if>	
				</table>
			</div>
		</div>
	</div>
</div>
<!-- 页面主体 end -->
<!-- 图片弹出层  begin -->
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
	<!-- Background of PhotoSwipe.
         It's a separate element, as animating opacity is faster than rgba(). -->
	<div class="pswp__bg"></div>
	<!-- Slides wrapper with overflow:hidden. -->
	<div class="pswp__scroll-wrap">
		<!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
		<div class="pswp__container">
			<!-- don't modify these 3 pswp__item elements, data is added later on -->
			<div class="pswp__item"></div>
			<div class="pswp__item"></div>
			<div class="pswp__item"></div>
		</div>
		<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
		<div class="pswp__ui pswp__ui--hidden">
			<div class="pswp__top-bar">
				<!--  Controls are self-explanatory. Order can be changed. -->
				<div class="pswp__counter"></div>
				<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
				<%--<button class="pswp__button pswp__button--share" title="Share"></button>--%>
				<%--<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>--%>
				<%--<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>--%>
				<!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
				<!-- element will get class pswp__preloader--active when preloader is running -->
				<div class="pswp__preloader">
					<div class="pswp__preloader__icn">
						<div class="pswp__preloader__cut">
							<div class="pswp__preloader__donut"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
				<div class="pswp__share-tooltip"></div>
			</div>
			<!--
			<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
			</button>
			<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
			</button>
			-->
			<div class="pswp__caption">
				<div class="pswp__caption__center"></div>
			</div>
		</div>
	</div>
</div>
<!-- 图片弹出层  end -->
<div class="garmentView">
	<iframe ref="garment_view" id='garment_view' src='http://yzs3d.ifashioncloud.com/lutai/#/web-design?companyId=3&goodsCode=ZW0035'>
	</iframe> 
</div>
   
<style>
.garmentView iframe{  width: 100%; height: 100%; border: none; }
.garmentView .show3dError{  width: 100%; height: 100%; border: none; display: none;}


</style>

<input id="basePath" value="<%=basePath%>" type="hidden">
<input type="hidden" value="${saleOrderDetailVO.orderNo}" id="orderNo" />
<input type="hidden" value="${saleOrderDetailVO.orderLineId}" id="orderLineId" />
<script src="<%=basePath%>resources/js/jquery.min.js?v=2.1.4"></script>
<script src="<%=basePath%>resources/js/photoswipe.min.js"></script>
<script src="<%=basePath%>resources/js/photoswipe-ui-default.min.js"></script>
<script src="<%=basePath%>resources/js/swiper/swiper.mini.js"></script>
<script type="text/javascript"> 
	var saleOrderDetailVOObj = ${saleOrderDetailVOObj};
	var app = new Vue({
        el: '.picture3DInfo',
        data: {
			show3dObj : saleOrderDetailVOObj,
			// varStatus_picture3D : varStatus_picture3D,
		}, 
		methods: {
			 //检查是否包含3D信息
			 checkIsHave3DInfo(){
				if( this.checkIsHave3DPicInfo() ||  this.checkIsHave3DModelInfo() )  { 
					return true;
				}
					return false;
			},
			
			checkIsHave3DPicInfo(){
				if( this.show3dObj.picture3D != null && this.show3dObj.picture3D != '' && this.show3dObj.picture3D != '[]' ) {
					return true;
				}
				return false;
			},
			
			checkIsHave3DModelInfo(){
				if(this.show3dObj.threeDimensionData != null && this.show3dObj.threeDimensionData != '' && this.show3dObj.threeDimensionData != '[]') {
					return true;
				}
					return false;
			},
			getPicture3DList: function (picStr) {
				if (this.$$.isNotNull(picStr)) {
				return picStr.split(",");
				}
			},
			
			show3dClick: function () {
				let styleCode = this.show3dObj.styleCode;
				let show3dJson = this.show3dObj.threeDimensionData;
				debugger
				this.$router.push({
				name: 'show3dPage',
				params: {
					styleCode: styleCode,
					show3dJson: show3dJson
					} 
				})
			},  
				 pictureListClick(index) {
					 pictureListClick(index);
				},
				 pictureShowByUrl(url) {
					var pswpElement = document.querySelectorAll('.pswp')[0]; 
					var items = [];
						var item = {
							src: url,
							w: 768,
							h: 1024
						};
						items.push(item);
					// define options (if needed)
					var options = {
						// history & focus options are disabled on CodePen
						history: false,
						focus: false,

						showAnimationDuration: 0,
						hideAnimationDuration: 0,
						index:0
					};

					var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
					gallery.init();
				}
		},
		mounted() {
			// debugger
			// console.log("test",this.show3dObj)
			// console.log("test",this.varStatus_picture3D) 
		}, 
	});

	
$(document).ready(function(){
	$("img.changBig").click(function () {
		openPhotoSwipe($(this).attr("src"));
	});
});

function pictureListClick(index) {
	var pswpElement = document.querySelectorAll('.pswp')[0];
	var saleOrderDetailVOObj = ${saleOrderDetailVOObj};
	var list = saleOrderDetailVOObj.picture3DList;
	var items = [];

	for (var i = 0; i < list.length; i++) {
		var url = list[i];
		var item = {
			src: url,
			w: 768,
			h: 1024
		};
		items.push(item);
	}
	// define options (if needed)
	var options = {
		// history & focus options are disabled on CodePen
		history: false,
		focus: false,

		showAnimationDuration: 0,
		hideAnimationDuration: 0,
		index:index
	};

	var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
	gallery.init();
}

function openPhotoSwipe(imgUrl) {
	var pswpElement = document.querySelectorAll('.pswp')[0];
	// build items array
	var items = [
		{
			src: imgUrl,
			w: 768,
			h: 1024
		}
	];
	// define options (if needed)
	var options = {
		// history & focus options are disabled on CodePen
		history: false,
		focus: false,

		showAnimationDuration: 0,
		hideAnimationDuration: 0

	};

	var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
	gallery.init();
};

var swiper = new Swiper('.swiper-container', {
	centeredSlides: true,
	autoplay: {
		delay: 1500,
		disableOnInteraction: false,
	},
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
});
</script>
</body>
</html>